<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>优惠劵管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/houtai/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/houtai/layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="/houtai/js/vue.js"></script>
</head>
<body>

<!----------------------------------------头部工具栏-------------------------------------------->
<script type="text/html" id="headbar">
    <div class="layui-btn-container">
        <!-- <div class="layui-input-block">
             <input type="text" name="cuponName" required  lay-verify="required" placeholder="优惠劵名称" autocomplete="off" class="layui-input" style="width:50px">
         </div>
         <button class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe615;</span>查找</button>-->
        <!-----判断是否有添加权限------->
        {{#  if(true){ }}
        <button class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe654;</span>添加</button>
        {{#  } }}

        {{#  if(true){ }}
        <button class="layui-btn layui-btn-sm" lay-event="remove" id="delete"><span class="layui-icon">&#xe640;</span>批量删除
        </button>
        {{#  } }}
    </div>
</script>
<!---------------------------------------------列工具条------------------------------------------->
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>
    <!--判断是否有修改权限-->
    {{#  if(true){ }}
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    {{#  } }}
    <!--判断是否有删除权限-->
    {{#  if(true){ }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    {{#  } }}
</script>
<!---------------------------------------------条件搜索框------------------------------------------->
<div class="demoTable" style="margin-top: 10px;margin-left: 10px">
    <form id="serachForm" class="layui-form">
        优惠券编号：
        <div class="layui-inline" style="width: 100px">
            <input class="layui-input" name="cuponNum" id="searchNum" autocomplete="off">
        </div>
        优惠券名称：
        <div class="layui-inline">
            <input class="layui-input" id="searchName" name="cuponName" autocomplete="off">
        </div>
        使用范围：
        <div class="layui-inline">
            <input class="layui-input" id="searchRange" name="serchRange" autocomplete="off">
        </div>

        <div class="layui-inline" style="margin-left: 10px">
            <!--这个地方的不能直接使用button标签，使用button标签会重复提交数据-->
            <input type="button" class="layui-btn" data-type="reload" value="搜索">
        </div>

    </form>
</div>
<!-----------------------------layui容器---------------------------------->
<div id="content">
    <table class="layui-table"
           lay-data="{url:'/houtai/page/coupon/list',page:true,limit:10,limits:[10,20,30],toolbar:'#headbar',
              height:'full-100',totalRow:true,loading:true,title:'优惠券列表',response: {
                 statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
              },
              //把返回的数据result转为换layUI需要的格式，此处返回的是mybatisPlus的IPage对象，具体返回值自己设定
              parseData: function(res){ //res 即为原始返回的数据
                  return {
                  'code': res.code, //解析接口状态
                  'msg': res.message, //解析提示文本
                  'count': res.obj.totalSize, //解析数据长度
                  'data': res.li //解析数据列表
                  };
              },
              //给表格设置一个ID
              id:'test'}" lay-filter="filter">
        <thead>
        <tr>
            <th lay-data="{checkbox:true,fixed:'left',minWidth:120}"></th>
            <th lay-data="{field:'cuponId', width:80, sort: true,minWidth:120}">优惠劵编号</th>
            <th lay-data="{field:'cuponName', width:80,align: 'center',minWidth:120}">优惠劵名称</th>
            <th lay-data="{field:'cuponContent', width:80,align: 'center',minWidth:120}">优惠劵内容</th>
            <th lay-data="{field:'cuponMoney', width:80,sort: true,align: 'center',minWidth:120}">优惠劵金额</th>
            <th lay-data="{field:'cuponRange', width:80,align: 'center',minWidth:120}">使用范围</th>
            <th lay-data="{field:'couponNum', width:80,sort: true,align: 'center',minWidth:80}">优惠劵数量</th>
            <th lay-data="{field:'cuponStatus',align: 'center',minWidth:80}">优惠券状态</th>
            <th lay-data="{field:'cuponUrl',align: 'center',minWidth:110}">优惠券地址</th>
            <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo',minWidth:110}">操作</th>
        </tr>
        </thead>
    </table>
</div>
<!-----------------------------------------添加表单------------------------------------------>
<div class="layui-row" id="addcoupon" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="addform" >
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券名称</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponName" placeholder="请输入优惠券名称" required lay-verify="required"
                           autocomplete="off" id="uid" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵详情</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponContent" placeholder="请输入优惠券详情" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券金额</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponMoney" placeholder="请输入优惠券金额" required lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">使用范围</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponRange" placeholder="请输入优惠券使用范围" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵数量</label>
                <div class="layui-input-block">
                    <input type="text" name="couponNum" placeholder="请输入优惠券数量" required lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵状态</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponStatus" placeholder="请输入优惠券状态" required lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵地址</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponUrl" placeholder="请输入优惠券地址" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit lay-filter="add">立即添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--------------------------------------------编辑表单------------------------------------->
<div class="layui-row" id="updatecoupon" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane"  id="updateform" lay-filter="updateFormFilter">
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券名称</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponName" placeholder="请输入优惠券名称" required lay-verify="required"
                           autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵详情</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponContent" placeholder="请输入优惠券详情" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠券金额</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponMoney" required lay-verify="required|number" placeholder="请输入优惠券金额"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">使用范围</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponRange" required lay-verify="required" placeholder="请输入优惠券使用范围"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵数量</label>
                <div class="layui-input-block">
                    <input type="text" name="couponNum" required lay-verify="required|number" placeholder="请输入优惠券数量"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵状态</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponStatus" required lay-verify="required|number" placeholder="请输入优惠券状态"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优惠劵地址</label>
                <div class="layui-input-block">
                    <input type="text" name="cuponUrl" required lay-verify="required" placeholder="请输入优惠券地址"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit lay-filter="update">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="/houtai/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/houtai/layuiadmin/layui/layui.all.js"></script>

<script>

    /*//定义四个全局变量用于是否显示增加、删除、修改按钮的权限验证
    var insert = false;//是否具备新增权限，默认不具备
    var del = false;
    var update = false;
    var isShow = false;
    //利用Vue判断是否具备每一行的删除或者修改权限
    var vue = new Vue({
        el: "#content",
        data: {
            buttons: []
        },
        computed: {
            isShow: function () {
                var _this = this;
                var delbtn = false;
                var updatebtn = false;
                //获取当前网页地址
                var url = location.href.split("localhost:8080")[1];
                $.ajax({
                    url: "/houtai/adminuser/buttons",
                    type: "get",
                    async: false,
                    data: {
                        url: url
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        _this.buttons = data.li;
                        for (var i = 0; i < _this.buttons.length; i++) {
                            if (_this.buttons[i].menuUrl.indexOf("insert") != -1) {
                                insert = true;
                                break;
                            }
                        }
                        for (var i = 0; i < _this.buttons.length; i++) {
                            if (_this.buttons[i].menuUrl.indexOf("delete") != -1) {
                                del = true;
                                isShow = true;
                                delbtn = true;
                                break;
                            }
                        }
                        for (var i = 0; i < _this.buttons.length; i++) {
                            if (_this.buttons[i].menuUrl.indexOf("update") != -1) {
                                update = true;
                                isShow = true;
                                updatebtn = true;
                                break;
                            }
                        }

                    }
                });

                if (delbtn || updatebtn) {
                    return true;
                } else {
                    return false;
                }

            }
        }
    });*/

    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        //头工具栏事件
        table.on('toolbar(filter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    // var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    //layer.msg("添加");
                    //开起弹出层
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "添加优惠劵",
                        area: ['500px', '600px'],//设置弹出层尺寸
                        content: $("#addcoupon") //引用的弹出层的页面层的方式加载新增界面表单
                    });
                    break;
                case 'remove':
                    var data = checkStatus.data;
                    //alert(JSON.stringify(data));
                    var couponIds = new Array();
                    for (var i = 0; i < data.length; i++) {
                        couponIds.push(data[i].cuponId);
                    }
                    alert(couponIds);
                    $.ajax({
                        url: "/houtai/page/coupon/deletes",
                        type: "get",
                        data: {couponIds: couponIds},
                        dataType: "json",
                        success: function (data) {
                            if ("success" == data.message) {
                                layer.msg("删除成功");
                                $(".layui-laypage-btn").click();
                            }

                        }
                    });
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(filter)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function () {
                    console.log(data.cuponId);
                    //console.log(index);
                    $.ajax({
                        url: "/houtai/page/coupon/delete",
                        type: "get",
                        data: {couponId: data.cuponId},
                        dataType: "json",
                        success: function (data) {
                            if (data.message == "success") {
                                layer.msg("删除成功", {icon: 6});
                                //重载表格
                                $(".layui-laypage-btn").click();
                            } else if (data.message == "premissionException") {
                                location.href = "/houtai/page/exception/NoPremission.html";
                            } else if (data.message == "serverException") {
                                location.href = "/houtai/page/exception/500.html";
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }

                        }
                    });
                    //layer.close(index);
                });
            } else if (obj.event === 'edit') {
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                form.val('updateFormFilter', {
                    "cuponName": data.cuponName // "name": "value"
                    ,"cuponContent": data.cuponContent
                    ,"cuponMoney": data.cuponMoney
                    ,"cuponRange":data.cuponRange
                    ,"couponNum":data.couponNum
                    ,"cuponStatus":data.cuponStatus
                    ,"cuponUrl":data.cuponUrl
                });
                //开起弹出层
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑优惠劵",
                    area: ['500px', '600px'],//设置弹出层尺寸
                    content: $("#updatecoupon") //引用的弹出层的页面层的方式加载新增界面表单
                });
                form.on('submit(update)', function () {
                    //var data = form.val("add");
                    //layer.msg(data.field);
                    //console.log(JSON.stringify(data.field));
                    //console.log($("#addform").serialize());
                    $.ajax({
                        url: "/houtai/page/coupon/update",
                        type: "post",
                        data: $("#updateform").serialize() + "&cuponId=" + data.cuponId,
                        dataType: "json",
                        success: function (data) {
                            if ("success" === data.message) {
                                layer.msg(data.message);
                            }
                        }
                    })
                });
            }
        });
        form.on('submit(add)', function (data) {
            //var data = form.val("add");
            //layer.msg(data.field);
            //console.log(JSON.stringify(data.field));
            //console.log($("#addform").serialize());
            $.ajax({
                url: "/houtai/page/coupon/insert",
                type: "post",
                data: $("#addform").serialize(),
                dataType: "json",
                success: function (data) {
                    if ("success" === data.message) {
                        layer.msg(data.message);
                    }
                }
            })
        });

        //return false;
        //数据表格的重载
        /*  var $ = layui.$, active = {
              reload: function(){
                  var dele = $('#delete');
                  //执行重载
                  table.reload('test', {
                      page: {
                          curr: 1 //重新从第 1 页开始
                      }
                      ,where: {
                          key: {
                              id: dele.val()
                          }
                      }
                  }, 'data');
              }
          };

          $('.layui-btn-container .layui-btn').on('click', function(){
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
          });*/
    });
</script>

</body>
</html>
